<!DOCTYPE html>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<html>
	<head>
		<meta charset="utf-8">
		<title>cryptochat home page</title>
		<script type="text/javascript" src="scripts/jquery-2.1.0.js"></script>
		<script type="text/javascript">
		
			function userLinkClick(username)
			{
				try
				{
					console.log("user link clicked: " + username);
					var userPublicKey = getUserPublicKey(username);
					var localStorageKey = $("#LOCAL_STORAGE_KEY").val();
					console.log("locale storage key: " + localStorageKey);
					console.log("user public key: " + userPublicKey);
					localStorage.setItem(localStorageKey, userPublicKey);
				}
				catch(e)
				{
					console.log(JSON.stringify(e));
				}
			}
		
			function getUserPublicKey(username)
			{
				return username + "_key";
			}
			
		</script>
	</head> 
	<body>
		<input type="hidden" id="LOCAL_STORAGE_KEY" value="org.merka.cryptochat.key"></input>
		<h1>CryptoChat is the end to end secure web based chat</h1>
		
		<c:forEach items="${users}" var="item">
			<div>
				<a href="javascript:userLinkClick('${item.username}')">${item.username}</a>
			</div>
		</c:forEach>
		
		<div>
			<textarea style="height: 200px; width: 300px;">
				
			</textarea>
		</div>
		<div>
			<input type="text" style="width: 300px;" />
			<input type="button" value="SEND -->" />
		</div>
	</body>
</html>
